<template>
  <div>
    <h2>v-on 事件绑定</h2>
    <p>你要购买商品的数量: {{ count }}</p>
    <!--  语法: v-on:事件名="少量代码" -->
    <button v-on:click="count++">+1</button>

    <!-- 语法: v-on:事件名="methods里函数名" -->
    <button v-on:click="addFn1">+5</button>

    <!-- 语法: v-on:事件名="methods里函数名(值)" -->
    <button v-on:click="addFn2(2)">X2</button>

    <!-- 语法: @事件名="methods里函数名" -->
    <button @click="addFn3">-1</button>
    <button @click="count++">+1</button>
    <button @click="addFn4">+5</button>
    <button @click="addFn5(10)">+10</button>
  </div>
</template>

<script>
export default {
  //data中的数据，用来渲染页面文本内容
  data() {
    return {
      count: 1,
    };
  },
  // 2.methods用来 定义函数
  methods: {
    addFn1() {
      this.count += 5;
    },
    addFn2(n) {
      this.count = this.count * n;
    },
    addFn3() {
      this.count -= 1;
    },
    addFn4() {
      this.count += 5;
    },
    addFn5(m) {
      this.count += m;
    },
  },
};
</script>

<style>
</style>
